<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <h:form id="addFriendForm" rendered="#{userSession.connected}">
                <p:panel header="Ajouter un ami" toggleable="true" id="panel">  
                    <h:panelGrid columns="3" cellpadding="5">  
                        <h:outputLabel value="Nom de l'ami :" for="friendInput" />  
                        <p:autoComplete id="friendInput" value="#{friendBean.selectedFriend}"
                                        converter="#{friendBean.userConverter}" 
                                        var="u" 
                                        itemLabel="#{u.firstname} #{u.lastname}" 
                                        itemValue="#{u}"
                                        completeMethod="#{friendBean.autocomplete}" 
                                        forceSelection="true" required="true" requiredMessage="Vous devez entrer un nom."/>  
                        <h:commandButton value="Ajouter" action="#{friendBean.addFriend()}"/>
                    </h:panelGrid>  
                </p:panel>  
            </h:form>

            <h:form id="listFriendsForm" rendered="#{userSession.connected}">
                <p:panel header="Mes amis" toggleable="true" id="panel">  
                    <p:dataGrid var="friend" value="#{userSession.user.friends}" columns="5" rows="10" paginator="true"  
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                rowsPerPageTemplate="9,12,15" emptyMessage="Vous n'avez pas encore ajouté d'ami !">  
                        <p:panel header="#{friend.firstname} #{friend.lastname}" style="text-align:center;">  
                            <h:panelGrid columns="1" style="width:100%;">  
                                <h:graphicImage width="75" library="images" value="#{friend.avatar}" />  
                                <p:commandButton update=":deleteConfirmForm:confirmDialog" oncomplete="confirmation.show()" value="Retirer de la liste d'amis">  
                                    <f:setPropertyActionListener value="#{friend}" target="#{friendBean.selectedFriend}" />  
                                </p:commandButton> 
                            </h:panelGrid>  
                        </p:panel>  
                    </p:dataGrid>  
                </p:panel>  
            </h:form>

            <h:form id="deleteConfirmForm">
                <p:confirmDialog id="confirmDialog" message="Êtes-vous sûr de vouloir retirer cet personne de votre liste d'ami ?"  
                                 header="Retrait d'une personne de la liste d'ami" severity="alert" widgetVar="confirmation">  
                    <p:commandButton id="confirm" value="Confirmer" update=":listFriendsForm" oncomplete="confirmation.hide()"  
                                     actionListener="#{friendBean.removeFriend()}" />  
                    <p:commandButton id="decline" value="Annuler" onclick="confirmation.hide()" type="button" />   
                </p:confirmDialog>  
            </h:form>

        </f:view>
    </ui:define>
</ui:composition>
